<!--
 * @Author: yanfeixin
 * @Date: 2025-04-14 15:47:54
 * @LastEditTime: 2025-04-21 19:15:34
 * @LastEditors: yanfeixin
 * @Description:
-->
<script setup lang="ts">
// import Icon from '@ant-design/icons-vue'
import designIcon from '@iconify-json/ant-design/icons.json'
import { addCollection, Icon } from '@iconify/vue'
import { computed, useAttrs } from 'vue'

const props = defineProps({
  icon: {
    type: String,
  },
  size: {
    type: String,
    default: '18px',
  },
  color: {
    type: String,
    default: '#333',
  },
})
addCollection(designIcon)
const iconName = computed(() => `#${props.icon}`)
const compStyle = computed(() => {
  return {
    width: props.size,
    height: props.size,
  }
})
const attrs = useAttrs()

const isLocal = computed(() => {
  return props.icon && props.icon.startsWith('local-')
})
</script>

<template>
  <template v-if="icon">
    <template v-if="isLocal">
      <svg aria-hidden="true" :style="compStyle" v-bind="attrs">
        <use :xlink:href="iconName" fill="currentColor" />
      </svg>
    </template>
    <template v-else>
      <Icon :icon="icon" v-bind="attrs" :height="size" />
    </template>
  </template>
</template>
